<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页头部页脚固定样式</title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="css/commen.css">
</head>

<body>
  <!-- ----------顶部固定head-------------------- -->
  <div class="head">
    <!-- head-top -->
    <div class="head-top clearfix">
      <div class="container">
        <!-- head-top-left -->
        <div class="head-top-left">
          <i class="iconfont">&#xe60d;</i>
          <span>400-010-8888</span>
          <span>您好，欢迎来到中蜜丝路！</span>
        </div>
        <div class="head-top-right">
          <i class="iconfont user">&#xe6a6;</i>
          <a href="#">登录</a>
          <div class="line"></div>
          <a href="#">会员中心<i class="iconfont icon-down">&#xe63c;</i></a>
        </div>
      </div>
    </div>
    <!-- head-navbar -->
    <div class="head-navbar">
      <div class="container">
        <!-- head-navbar左侧logo -->
        <a href="#">
          <img src="image/logo.png">
        </a>
        <div class="head-navbar-right">
          <ul class="nav-ul clearfix">
            <li><a href="#">首页</a><span class="link-line"></span></li>
            <li><a href="#">蜜源寻蜜</a></li>
            <li><a href="#">好蜜科普</a></li>
            <li><a href="#">蜂业专委会</a></li>
            <li><a href="#">蜜蜂视界</a></li>
            <li><a href="#">会员中心</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="banner-img">
      <img src="image/temp/banner_1.jpg">
    </div>
  </div>
  <!-- ----------中间内容区域（添加内容区域）-------------------- -->
  <div class="container">
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
    删除添加内容<br>
  </div>
  <!-- ----------底部固定footer-------------------- -->
  <div class="footer">
    <div class="container">
      <!-- footer 左侧区域 -->
      <ul class="foot-left">
        <li><i class="iconfont">&#xe60a;</i>400-010-8888</li>
        <li><i class="iconfont">&#xe74f;</i>工作时间：8:30-17:30</li>
        <li><i class="iconfont">&#xe67b;</i>E-mail：contact@zhongmisilu.com</li>
        <li><i class="iconfont">&#xe634;</i>海南省海口市龙华区财富广场18C</li>
      </ul>
      <div class="foot-line"></div>
      <!-- footer 中间区域 -->
      <div class="foot-center">
        <dl>
          <dt>
            <a href="#">蜜源寻蜜</a>
          </dt>
        </dl>
        <dl>
          <dt>
            <a href="#">好蜜科普</a>
          </dt>
          <dd>
            <a href="#">蜜源探秘</a>
            <a href="#">蜂蜜常识</a>
            <a href="#">蜂蜜种类</a>
            <a href="#">蜂蜜价值</a>
          </dd>
        </dl>
        <dl>
          <dt>
            <a href="#">蜂业专委会</a>
          </dt>
          <dd>
            <a href="#">工匠认证</a>
            <a href="#">专业培训</a>
            <a href="#">专委会介绍</a>
          </dd>
        </dl>
        <dl>
          <dt>
            <a href="#">蜜蜂视界</a>
          </dt>
          <dd>
            <a href="#">全部视频</a>
          </dd>
        </dl>
        <dl>
          <dt>
            <a href="#">会员中心</a>
          </dt>
        </dl>
      </div>
      <div class="foot-line"></div>
      <!-- footer 右侧区域 -->
      <dl class="foot-right">
        <dt><img src="image/temp/wx.jpg"></dt>
        <dd>
          扫描上方公众号微信二维码<br>
          或者微信加公众号：zhongmisilu
        </dd>
      </dl>
    </div>
    <!-- copyright -->
    <div class="copyright">
      © 2017 中蜜丝路 鲁公网安备 11010102002425号 鲁ICP证160503号 鲁ICP备14052685号-1
    </div>
  </div>
</body>
</html>